<template>
  <div class="m-t-30px">
    <div
      class="w-full p-[16px_24px] bg-#f6f7f8 b-rd-6px text-center cursor-pointer"
    >
      <p>点击申请bilibli认证<span class="iconfont icon-jiantou2"></span></p>
      <p class="text-12px c-#61666d m-t-2px">获得认证，享受多重认证福利！</p>
    </div>

    <div class="w-full p-[16px_24px] bg-#f6f7f8 m-t-10px b-rd-6px">
      <div
        class="c-#3ec0ef text-center leading-30px cursor-pointer"
        @click="router.push('/create')"
      >
        <span class="iconfont icon-chuangzuozhongxin"></span>
        <span class="m-l-4px font-600">创作中心</span>
        <span class="iconfont icon-jiantou2 font-600"></span>
      </div>
      <div
        class="m-[0_auto] rd-6px b-1px b-solid b-#e3e5e7 w-209px h-34px flex items-center justify-around text-12px m-t-20px"
      >
        <div class="cursor-pointer" @click="router.push('/create')">
          <span class="iconfont icon-shangchuan text-20px v-mid"></span>
          <span>视频创作</span>
        </div>
        <div class="w1px h-20px b-l-1px b-l-solid b-l-#e3e5e7"></div>
        <div class="cursor-pointer" @click="router.push('/create')">
          <span class="iconfont icon-tougao1 text-12px v-middle m-r-4px"></span>
          <span>投稿管理</span>
        </div>
      </div>
    </div>

    <div class="w-full p-[16px_24px] bg-#f6f7f8 m-t-10px b-rd-6px flex gap20px">
      <el-button class="c-#fff w-120px h-34px text-16px" color="#ff6699">
        充电
      </el-button>
    </div>

    <div class="w-full p-[16px_24px] bg-#f6f7f8 m-t-10px b-rd-6px">
      <div>公告</div>
      <el-input
        v-model="userInfo.notice"
        :rows="6"
        maxlength="150"
        type="textarea"
        show-word-limit
        placeholder="编辑我的公告"
        @blur="onSubmit"
      />
    </div>

    <div class="w-full p-[16px_24px] bg-#f6f7f8 m-t-10px b-rd-6px">
      <div class="flex justify-between items-center">
        <span>个人资料</span>
        <div
          class="text-12px c-#61666d cursor-pointer"
          @click="router.push('/user')"
        >
          <!-- <span>编辑</span>
          <span class="iconfont icon-jiantou2 v-mid m-l-2px"></span> -->
        </div>
      </div>
      <div class="text-14px m-t-10px flex items-center">
        <span class="iconfont icon-uid1 c-#61666d m-r-10px"></span>
        <span>{{ userInfo.id }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import type { UserInfoVo } from "@/api/user/types";
import { useUserStore } from "@/store/userStore";
import cloneDeep from "lodash/cloneDeep";
import { isEqual } from "lodash";
import router from "@/router";

const userStore = useUserStore();
const userInfo = ref<UserInfoVo>(cloneDeep(userStore.userInfo));

const isModified = computed(() => {
  return !isEqual(userInfo.value, userStore.userInfo);
});

const onSubmit = async () => {
  if (isModified) {
    userInfo.value.userVo.avatar = "";
    await userStore.updUserInfo(userInfo.value);
  }
};
</script>

<style scoped lang="less">
::v-deep(.el-textarea__inner) {
  resize: none;
  box-shadow: none;
  background-color: #f6f7f8;
  padding-left: 0;
  padding-right: 0;
}

::v-deep(.el-input__count) {
  background-color: #f6f7f8;
}
</style>
